<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div class="panel panel-headline">
	<div class="panel-heading">
		<h3 class="panel-title">景点信息</h3>
		<div class="right col-md-6 text-right">
			<a href="#" id="add-btn" class="btn btn-primary">添加景点信息</a>
		</div>
		<div class="left col-md-13 text-left">
			<form class="form-inline" role="form" style="">
				<div class="form-group has-feedback">
					<div class="input-group">
						<div class="input-group-addon">查询条件</div>
						<input class=" has-success"  id="pro_select" name="province" type="text" placeholder="省"> <input
							class=" has-success"  id="cit_select"  type="text"   name="city" placeholder="市">

					</div>
				</div>
				<button type="button" class="btn scn_select_btn">
					<i class="glyphicon glyphicon-search"></i> 查询
				</button>
			</form>
		</div>
	</div>
	<div class="panel-body no-padding">
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th>景点名称</th>
					<th>景点详细位置</th>
					<th>景点说明</th>
					<th>省</th>
					<th>市</th>
					<th>图片地址</th>
					<th>景点票价￥(元/张)</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="listLocation">
				<!-- 列表内容 -->
			</tbody>
			<tfoot>
				<tr>
					<td id="pageLocation" colspan="9" align="right">
						<!-- 分页条 -->
					</td>
				</tr>
			</tfoot>
		</table>
	</div>
</div>
<!-- 添加/修改模态框 -->
<div class="modal fade" id="scen_modal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel"></h4>
			</div>
			<div class="modal-body">
				<form id="operateForm" method="post" enctype="multipart/form-data">
					<input type="hidden" id="sid" name="scenicId">
					<input type="hidden" id="picUrl" name="pictureUrl">
					<div class="form-group">
						<label>景点名称</label> <input type="text" class="form-control"
							id="sc_name_input" name="scenicName" placeholder="景点名称">
					</div>
					<div class="form-group">
						<label>景点详细位置</label> <input type="text" class="form-control"
							id="sc_location_input" name="scenicLocation" placeholder="景点位置">
					</div>
					<div class="form-group">
						<label>景点说明</label> <input type="text" class="form-control"
							id="sc_details_input" name="scenicDetails" placeholder="介绍下景点吧">
					</div>
					<div class="form-group">
						<label>所处省</label> <input type="text" class="form-control"
							id="sc_province_input" name="province" placeholder="如广东省为-广东">
					</div>
					<div class="form-group">
						<label>所处市</label> <input type="text" class="form-control"
							id="sc_city_input" name="city" placeholder="如深圳市为-深圳">
					</div>
					<div class="form-group">
						<label>门票价格</label> <input type="text" class="form-control"
							id="sc_price_input" name="ticketPrice" value="0.00" placeholder="精确到0.00">
					</div>
					<div class="form-group">
						<label>选择景点高清无码大图</label> <input type="file" name="sc"
							id="sc_file_input">
					</div>
					<div class="form-group">
						<!--选择的文件展示位  -->
						<div class="row">
							<div class="col-md-12 imgdiv"></div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" id="operate-btn" class="btn btn-primary">提交</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var index;//layer提示框的索引

	var pageNum;
	var lastPage;
	$(function() {

		options = {
			backdrop : false,
			show : true
		};

		getAllScen(null, null);

	});
	//按条件展示数据
	$(".scn_select_btn").click(function(){
		//alert("1");
		var province=$.trim($("#pro_select").val());
		var city=$.trim($("#cit_select").val());
		if(province!=""||city!=""){
			//alert(2);
			selectScen(pageNum,null);
		}else{
			
			getAllScen(pageNum, null);
			
		}
		
		
	});
	function selectScen(pn,ps){
		var selectpg="selectpg";
		//alert(3);
		var province=$.trim($("#pro_select").val());
		var city=$.trim($("#cit_select").val());
		pageNum = pn;
		$.post("${ctp}/scenicdetail/select",{province:province,city:city,pn:pn,ps:ps},function(info){
			lastPage = info.pages;
			if (info.size != 0) {
				//调用插入列表方法
				showToTable($("#listLocation"), info.list);
				//调用插入分页条方法
				insertPage($("#pageLocation"), info,selectpg);
			} else {
				layer.msg("没有数据！请及时添加");
			}
			
		});
		
	}
	// 发送Ajax请求获取列表数据
	function getAllScen(pn, ps) {
		var getAll="getAll";
		pageNum = pn;
		$.post("${ctp}/scenicdetail/list", {
			pn : pn,
			ps : ps
		}, function(info) {
			console.log(info);
			lastPage = info.pages;
			if (info.size != 0) {
				//调用插入列表方法
				showToTable($("#listLocation"), info.list);
				//调用插入分页条方法
				insertPage($("#pageLocation"), info,getAll);
			} else {
				layer.msg("没有记录！");
			}
		});
	}
	
	
	// 删除单个景点数据
	$("body").on("click", ".delete-btn", function() {
		var sid = $(this).attr("sid");
		if (confirm("确认删除" + sid + "号景点？")) {
			$.get("${ctp}/scenicdetail/delScen", {
				sid : sid
			}, function(result) {
				layer.msg(result.result);
				//更新数据并打开列表模态框
				getAllScen(pageNum, null);
			});
		}

	});
	// 打开添加模态框
	$("#add-btn").click(function() {

		//打开添加模态框,将值置空
		$("#operateForm")[0].reset();
		//打开操作模态框
		$("#scen_modal").modal("show");
		//给按钮设置属性值
		$("#myModalLabel").text("添加新的景点");
		$("#operate-btn").attr("operate", "addScn");
		$("#operate-btn").attr("pn", lastPage);

		return false;
	});
	
	// 打开修改模态框
	$("body").on("click", ".update-btn", function(){
		// 将输入框置空
		$("#operateForm")[0].reset();
		//给修改模态框添加值
		$("#sid").val($(this).attr("sid"));
		$("#picUrl").val($(this).attr("pictureUrl"));
		$("#sc_name_input").val($(this).attr("scenicName"));
		$("#sc_location_input").val($(this).attr("scenicLocation"));
		$("#sc_details_input").val($(this).attr("scenicDetails"));
		$("#sc_province_input").val($(this).attr("province"));
		$("#sc_city_input").val($(this).attr("city"));
		$("#sc_price_input").val($(this).attr("ticketPrice"));
		/* if($(this).attr("ticketPrice")==null){
			$("#sc_price_input").val("0.00");
		}else{
			$("#sc_price_input").val($(this).attr("ticketPrice"));	
		} */
		//打开修改模态框
		$("#scen_modal").modal("show");
		
		//给按钮设置属性值
		$("#myModalLabel").text("修改景点信息");
		$("#operate-btn").attr("operate", "updateScn");
		$("#operate-btn").attr("pn", pageNum);
	});
	
	//确认添加/修改
	$("#operate-btn").click(function(){
		operate($(this).attr("operate"), $(this).attr("pn"));
	});
	
	function operate(operate,pn){
		//alert(operate);
		var fd = new FormData();
		if("updateScn"==operate){
			fd.append("scenicId", $("#sid").val());	
			}
		fd.append("scenicName", $("#sc_name_input").val());
		fd.append("scenicLocation", $("#sc_location_input").val());
		fd.append("scenicDetails", $("#sc_details_input").val());
		fd.append("province", $("#sc_province_input").val());
		fd.append("city", $("#sc_city_input").val());
		fd.append("ticketPrice", $("#sc_price_input").val()); 
		fd.append("file", $("#sc_file_input")[0].files[0]);
		console.log(fd);
		$.ajax({
			//url :"http://localhost:8080/youu-restapi/show/scenicdetail/addScn",
			url :"http://139.159.229.19:80/youu-restapi/show/scenicdetail/addScn",
			type : "post",
			data:fd,
			processData : false,//告诉ajax不要处理和编码这些数据，直接提交
			contentType : false,//不使用默认的内容类型
			success : function(result) {
				if(result!=""){
				fd.append("pictureUrl",result);
				}else{
				fd.append("pictureUrl", $("#picUrl").val());	
				};
				$.ajax({
					url : "${ctp }/scenicdetail/"+operate,
					type : "post",
					//data:new FormData($("#ad_form")[0]),
					data : fd,
					processData : false,//告诉ajax不要处理和编码这些数据，直接提交
					contentType : false,//不使用默认的内容类型
					success : function(result) {
						//关闭操作模态框
						$("#scen_modal").modal('hide');
						layer.msg(result.result);
						//将输入框的数据抹除
						$("#operateForm")[0].reset();
						//更新数据并打开列表模态框
						getAllScen(pn, null);

					}
				});
					
			},
			error : function(e) {
				layer.msg(e);
			}
		});
		
	}
	//为文件选择项绑定事件；
	$("#sc_file_input").change(function(event){
		//alert("aa");
		//拿到图片项。进行显示
		//1、回调函数需要获取到事件对象
		//2、可以用事件对象得到很多信息
		var files = event.target.files; //this.files[0]
		var file;
		if(files && files.length>0){
			file = files[0];
		}
		//文件上传限制大小  提交表单的时候判断
		//if(file.size > 1024)
		//只允许图片 type:"image/jpeg"
		var reg = /image*/;
		if(!reg.test(file.type)){
			alert("请选择一个图片");
			//不是图片将val置空
			$("#sc_file_input").val("");
			return false;
		};
		
	});	
	
	$("body").on("click", ".showimg", function() {
		//this
		//推荐使用bootstrap模态框弹出显示图片；可以自适应大小
		var url = $(this).attr("url");
		layer.open({
			type : 1,
			skin : 'layui-layer-rim', //加上边框
			area : [ '82%', '88%' ], //宽高
			content : "<img  src='http://139.159.229.19:80/youu-restapi"+url+"'/>"
		});
	})
	
	function showToTable(listLocation, info) {
		//显示之前先移除之前的数据
		listLocation.empty();
		$
				.each(
						info,
						function() {
							var tr = $("<tr></tr>")
									.append("<td>" + this.scenicId + "</td>")
									.append("<td>" + this.scenicName + "</td>")
									.append(
											"<td>" + this.scenicLocation
													+ "</td>")
									.append(
											"<td>" + this.scenicDetails
													+ "</td>")
									.append("<td>" + this.province + "</td>")
									.append("<td>" + this.city + "</td>")
									.append("<td>" + this.pictureUrl + "</td>")
									.append("<td>" + this.ticketPrice + "</td>");

							var showImg = $("<button type='button' url='"+this.pictureUrl+"' class=' btn-success showimg'><i class='glyphicon glyphicon-eye-open'></i></button>");
							var td = $("<td></td>")
									.append(
											"<button class='update-btn btn-primary' type='button' sid='"+this.scenicId+"' pictureUrl='"+this.pictureUrl+"' scenicName='"+this.scenicName+"'scenicLocation='"+this.scenicLocation+"'scenicDetails='"+this.scenicDetails+"'province='"+this.province+"'city='"+this.city+"'ticketPrice='"+this.ticketPrice+"'><i class='glyphicon glyphicon-check'></i></button>")
									.append(
											"&nbsp;&nbsp;<button class='delete-btn btn-danger' type='button' sid='"+this.scenicId+"'><i class='glyphicon glyphicon-remove'></i></button>&nbsp;&nbsp;");

							td.append(showImg);
							td.appendTo(tr);
							listLocation.append(tr);
						});

	}
	// 上一页
	$("body").on("click", ".prePage", function() {
		$(".prePage").click(function() {
			var pg=$(this).attr("pg");
			if("select"==pg){
			selectScen($(this).attr("pn"),null);
				
			}else{
				
			getAllScen($(this).attr("pn"), null);	
			}
			
		});
	});

	// 连续页
	$("body").on("click", ".conPage", function() {
		$(".conPage").click(function() {
			var pg=$(this).attr("pg");
			if("select"==pg){
			selectScen($(this).attr("pn"),null);
				
			}else{
				
			getAllScen($(this).attr("pn"), null);	
			}
		});
	});

	// 下一页
	$("body").on("click", ".nextPage", function() {
		$(".nextPage").click(function() {
			var pg=$(this).attr("pg");
			if("select"==pg){
			selectScen($(this).attr("pn"),null);
				
			}else{
				
			getAllScen($(this).attr("pn"), null);	
			}
		});
	});

	// 插入分页条
	function insertPage(location, pageInfo,order) {
		//先删除之前的所有分页信息
		location.empty();
		//上一页
		var ul = $("<ul class='pagination'></ul>");
		if (pageInfo.pageNum == 1) {
			ul
					.append("<li class='disabled'><a> <span aria-hidden='true'>&laquo;</span></a></li>");
		} else {
			ul
					.append("<li><a class='prePage' pn='"+pageInfo.prePage+"'pg='"+order+"'> <span aria-hidden='true'>&laquo;</span></a></li>");
		}
		//连续页
		$.each(pageInfo.navigatepageNums, function() {
			if (this == pageInfo.pageNum) {
				ul.append("<li class='active'><a>" + this + "</a></li>");
			} else {
				ul.append("<li><a class='conPage' pn='"+this+"'pg='"+order+"'>" + this
						+ "</a></li>");
			}
		});
		//下一页
		if (pageInfo.pageNum == pageInfo.pages) {
			ul
					.append("<li class='disabled'><a> <span aria-hidden='true'>&raquo;</span></a></li>");
		} else {
			ul
					.append("<li><a class='nextPage' pn='"+pageInfo.nextPage+"'pg='"+order+"'> <span aria-hidden='true'>&raquo;</span></a></li>");
		}

		location.append(ul);
	}
</script>









